<template>
    <div class="faq-container">
      <ul class="faq-list">
        <li v-for="(item, index) in faqItems" :key="index">
          <div class="question" @click="toggleAnswer(index)">
            {{ item.question }}
            <i :class="['arrow', item.open ? 'open' : '']"></i>
          </div>
          <div class="answer" :class="{ 'open': item.open }">
            {{ item.answer }}
          </div>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        faqItems: [],
      };
    },
    methods: {
      toggleAnswer(index) {
        this.faqItems.forEach((item, i) => {
          if (i !== index) {
            item.open = false;
          }
        });
        this.faqItems[index].open = !this.faqItems[index].open;
      },
    },
    mounted() {
      // 发起HTTP请求以获取数据
      axios.get('/api/faq').then((response) => {
        this.faqItems = response.data;
      });
    },
  };
  </script>
  
  
  <style scoped>
  .faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .faq-list {
    list-style-type: none;
    padding: 0;
  }
  
  .question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #08b2e8;
  }
  
  .arrow {
    margin-left: 10px;
    transform: rotate(0deg);
    transition: transform 0.3s;
  }
  
  .arrow.open {
    transform: rotate(90deg);
  }
  
  .answer {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: none;
    transition: max-height 0.3s;
    max-height: 0;
    overflow: hidden;
  }
  
  .answer.open {
    max-height: 200px;
    transition: max-height 0.3s;
    overflow: visible;
  }
  </style>
  /*
  // server.js (后端服务器)
  const express = require('express');
  const mysql = require('mysql');
  const app = express();
  const port = 3000;
  
  // 创建MySQL数据库连接
  const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database_name',
  });
  
  // 连接到MySQL数据库
  db.connect((err) => {
  if (err) {
  console.error('MySQL connection error: ' + err.stack);
  return;
  }
  console.log('Connected to MySQL database as id ' + db.threadId);
  });
  
  // 假设你有一个名为faq的表存储问题和答案数据
  app.get('/api/faq', (req, res) => {
  const query = 'SELECT * FROM faq';
  db.query(query, (error, results) => {
  if (error) {
  console.error('MySQL query error: ' + error);
  res.status(500).json({ error: 'Internal Server Error' });
  return;
  }
  res.json(results);
  });
  });
  
  app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
  });
  */